<template>
	<view>
		<template v-if="curNow == 0">
			<view class="content">
				<view class="title" :style="'padding-top:'+barHeight+'px'">平台保障 极速响应</view>
				
				<!-- <view style="width: 360rpx;margin: auto;" :style="'padding-top:'+barHeight+'px'">
					<u-subsection activeColor="#FFBC43" @change="sectionChange" :list="tagList"
						:current="curNow"></u-subsection>
				</view> -->

				<view class="search-box">
					<view class="" style="display: flex;align-items: center;">
						<image src="../../static/search-img.png" mode=""></image>
						<input @input="resizeInput" v-model="keyword" type="text" placeholder="请输入关键词" />
					</view>
					<view class="search-btn" @click="seek">搜索</view>
				</view>
				<view style="width: 1rpx;margin-top: 36rpx;"></view>
				<template>
					<view class="class flex main">
						<scroll-view scroll-y="true" class="nav">
							<view class="nav_item flex f-y-c f-x-c" @click="curHot" :class="{ act: 1 == hot }">
								<view class="actLine" v-if="1 == hot"></view>
								<view class="text ellipsis t-c">热门分类</view>
							</view>
							<view class="nav_item flex f-y-c f-x-c" @click="cutClass(index)"
								:class="{ act: index == navAct && !hot }" v-for="(item, index) in list" :key="index">
								<view class="actLine" v-if="index == navAct && !hot"></view>
								<view class="text ellipsis t-c">{{item.name}}</view>
							</view>
						</scroll-view>
						<scroll-view @scroll="onRightScroll" :scroll-with-animation="true" scroll-y="true"
							class="shop_list" :scroll-top="scroll">
							<view style="position: fixed;z-index: 999;">
								<view class="tab-box" v-if="hot">
									<view @click="toskillList(index,i)" class="tabs"
										:class="{'cut-tabs':index == currentTab}" v-for="(i,index) in hotCate"
										:key="index">
										{{i.name}}
									</view>
								</view>
							</view>
							<!-- 热门分类 -->
							<view v-if="hot" class="item-box right-scroll-item" v-for="(hots,index) in hotList">
								<view style="height: 32rpx;width: 1rpx;"></view>
								<view class="item-title" style="margin-top: 52rpx;">{{hots.name}}</view>
								<view class="item-each-box">
									<view class="item-each" v-for="(i,k) in hots.sunList" @click="toskillList(-1,i)">
										<image :src="oss(i.image)" mode="aspectFill"></image>
										<view class="item-name">{{i.name}}</view>
									</view>
								</view>
							</view>
							<!-- 其他分类 -->
							<view class="item-box" v-if="!hot">
								<view style="height: 32rpx;width: 1rpx;"></view>
								<view class="item-title">{{list[navAct].name}}</view>
								<view class="item-each-box">
									<view class="item-each" v-for="(i,index) in list[navAct].sunList"
										@click="toskillList(-1,i)">
										<image :src="oss(i.image)" mode="aspectFill"></image>
										<view class="item-name">{{i.name}}</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</template>

				<view v-if="service" class="issue" @click="toLevel()">
					超级曝光
				</view>
				<view v-else class="issue" @click="toissueserve()">
					服务赚钱
				</view>
			</view>

			<u-popup :closeable="true" :show="serveShow" @close="close" @open="open" :round='10' mode="center">
				<view class="popup-box">
					<view class="gh-title">请先进行个人认证</view>
					<view class="growrule">
						<view class="btn2" @click="guanbi">关闭</view>
						<view class="btn1" @click="torenzheng">去认证</view>
					</view>
				</view>
			</u-popup>
		</template>

		<!-- 同城服务物 -->
		<template v-if="curNow == 1">
			<view style="background-color: #FFDF41;">
				<view style="width: 360rpx;margin: auto;" :style="'padding-top:'+barHeight+'px'">
					<u-subsection activeColor="#FFBC43" @change="sectionChange" :list="tagList"
						:current="curNow"></u-subsection>
				</view>
			</view>
			<cityService></cityService>

		</template>
	</view>
</template>

<script>
	import cityService from "@/components/cityService.vue"
	export default {
		components: {
			cityService
		},
		data() {
			return {
				barHeight: 0,
				navAct: 0,
				// tabs:['热门分类','保姆月嫂','搬家','热门分类','保姆月嫂','搬家'],
				currentTab: 0,
				serveShow: false,
				list: '',
				hotList: '',
				record_id: '', //获取的记录id
				plus: '',
				service: '', //服务者
				ident: '', //个人认证
				hot: 1,
				hotCate: '',
				keyword: '', //关键词
				sonHotCate: '',
				scroll: 0,
				info: '',
				rightDomsTop: [],

				tagList: ['服务', '同城任务'],
				curNow: 0,
				menuButtonWidth: '' //小程序胶囊宽度
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			// 获取胶囊按钮位置信息
			const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
			this.menuButtonWidth = menuButtonInfo.width
			// #endif

			this.barHeight = uni.getSystemInfoSync().statusBarHeight
			this.getCate()
		},
		onShow() {
			if (uni.getStorageSync('token')) {
				this.isPlus()
			}
		},
		onReady() {
			// 数据加载成功并且第一次渲染浏览器上 right-scroll-item
			//1:创建query对象
			setTimeout(() => {
				const query = uni.createSelectorQuery().in(this);
				//2:查询右侧所有添加 right-scroll-item 元素
				query.selectAll(".right-scroll-item").boundingClientRect(data => {
					//2.1:获取顶部位置 .top rightDomsTop 11:49
					this.rightDomsTop = data.map(item => item.top)
					console.log(this.rightDomsTop, '????');
				}).exec();
			}, 1000)

		},
		onShareTimeline(){
		    return{
		      title:'找师傅帮忙找半柿，各行各业的师傅随叫随到',  //分享的标题
		      query:'pages/serve/newserve',     //点击分享链接之后进入的页面路径
		      imageUrl:'', // 设置分享卡片图片
		    }
		},
		methods: {
			sectionChange(index) {
				this.curNow = index;
			},
			toLevel() {
				uni.navigateTo({
					url: '/pages/my/level'
				})
			},
			seek() {
				this.authTo('pages/serve/serve?name=' + this.keyword)
			},
			resizeInput() {
				console.log(this.keyword)
			},
			//热门分类
			curHot() {
				this.hot = 1
			},
			isPlus() {
				uni.$u.http.post('/index', ).then(res => {
					if (res.code == 1) {
						this.info = res.data
						this.plus = res.data.plus
						this.ident = res.data.ident
						this.service = res.data.service
					}
				}).catch((res) => {

				})
			},
			torenzheng() {
				this.serveShow = false
				this.authTo('pages/my/renZheng/geren')
			},
			guanbi() {
				this.serveShow = false
			},
			cutClass(i) {
				console.log(i, '???')
				this.navAct = i
				this.hot = 0
				console.log(this.hot)
			},
			// editPostSkill(){
			// 	uni.$u.http.post('/editPostSkill').then(res => {
			// 		if (res.code == 1) {
			// 			this.authTo('pages/newissue/skill')
			// 			// this.$u.toast('首次发布先选择分类');
			// 		}
			// 	}).catch((res) => {

			// 	})
			// },
			getCate() {
				uni.$u.http.post('/newcate').then(res => {
					if (res.code == 1) {
						this.list = res.data.list
						this.hotCate = res.data.hotCate
						this.hotList = res.data.hotList
						this.sonHotCate = res.data.sonHotCate
					}
				}).catch((res) => {

				})
			},
			toskillList(index, item) {
				if (index == -1) {
					this.authTo('pages/serve/serve?cate_id=' + item.id)
				} else {
					this.currentTab = index
					console.log(item)
					let idx = index;
					//2:依据下标获取右侧对应top位置
					let top = this.rightDomsTop[idx];
					//3:赋值
					this.scroll = top - (this.barHeight + 105);
					// setTimeout(()=>{
					// 	this.currentTab = index
					// },500)
				}

			},
			onRightScroll(e) {
				// console.log(e.detail.scrollTop,'....,,');
				//1:创建循环遍历右侧数组
				this.rightDomsTop.forEach((item, index) => {
					//2:如果当前滑动位置大于当前元素位置
					if (item <= e.detail.scrollTop + 110) {

						// this.currentTab = index;
						return false;
					}
				})
				//4:停止
			},
			toissueserve() {
				console.log(this.ident, this.service, this.plus)
				if (uni.getStorageSync('token')) {
					if (this.ident) {
						if (this.service) {
							// if(this.plus){
							// 	this.authTo('pages/newissue/skill')
							// }else {
							// 	this.$u.toast('请先成为会员');
							// }
							this.authTo('pages/newissue/skill')
						} else {
							this.authTo('pages/newissue/skill')
						}
					} else {
						this.serveShow = true
					}

				} else {
					uni.$u.route({
						url: 'pagesA/auth/login'
					})
				}
			},

			open() {
				// console.log('open');
			},
			close() {
				this.serveShow = false
			},
		}
	}
</script>

<style lang="scss">
	.content {
		background: #F6F6F6;
		height: calc(100vh - 90rpx);
		display: flex;
		flex-direction: column;

		.main {
			flex: 1;
			overflow: hidden;
		}
	}

	.title {
		font-weight: 800;
		font-size: 40rpx;
		color: #333333;
		padding-left: 32rpx;
	}

	.search-box {
		width: 686rpx;
		height: 68rpx;
		background: #FFFFFF;
		border-radius: 39rpx 39rpx 39rpx 39rpx;
		border: 1rpx solid #FEBF4E;
		margin: auto;
		margin-top: 21rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		image {
			width: 28rpx;
			height: 28rpx;
			margin-left: 32rpx;
			margin-right: 16rpx;
		}

		.search-btn {
			width: 110rpx;
			height: 58rpx;
			background: #FEBF4E;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			margin-right: 6rpx;
			font-size: 22rpx;
			color: #333333;
			line-height: 26rpx;
			text-align: center;
			line-height: 58rpx;
		}
	}

	.class {

		.nav,
		.shop_list {
			// height: calc(100vh - 180rpx);
			overflow: hidden;
			box-sizing: border-box;
			background-color: #FFF;
		}

		.nav {
			background: #f5f5f5;
			width: 180rpx;
			border-radius: 0 30rpx 0 0;

			.nav_item {
				padding: 40rpx 0;
				font-size: 28rpx;
				font-weight: 400;
				color: #989898;

				.text {
					width: 190rpx;
				}

				.actLine {
					width: 8rpx;
					height: 28rpx;
					background: #febf4e;
					border-radius: 4rpx;
					// margin-right: 15rpx;
				}

				&.act {
					font-size: 32rpx;
					font-weight: 400;
					color: #343434;
					// background: #fff;

					.text {
						width: 160rpx;
					}
				}
			}
		}

		.shop_list {
			flex: 1;
			padding: 30rpx 40rpx;

			.tab-box {
				width: 500rpx;
				background-color: #FFF;
				display: flex;
				// flex-wrap: wrap;
				// margin-left: 16rpx;
				overflow: hidden;
				overflow-x: auto;
				white-space: nowrap;
				position: relative;
				top: -10rpx;
				padding-bottom: 10rpx;

				.tabs {
					background: #F6F6F6;
					border-radius: 29rpx 29rpx 29rpx 29rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #666;
					padding: 12rpx 22rpx;
					text-align: center;
					margin-left: 16rpx;
				}

				.cut-tabs {
					border: 1rpx solid #FEBF4E;
					background: #FFFAE5;
					color: #FF8007;
				}
			}

			// .l1{
			// 	background-color: #FEC04F;
			// }
			.item-box {
				.item-title {
					font-weight: bold;
					font-size: 28rpx;
					color: #1C274C;
					// margin-top: 32rpx;
				}

				.item-each-box {
					display: flex;
					flex-wrap: wrap;

					.item-each {
						width: 33.33%;
						margin-top: 42rpx;

						image {
							display: block;
							width: 144rpx;
							height: 144rpx;
							border-radius: 10rpx 10rpx 10rpx 10rpx;
							margin: auto;
						}

						.item-name {
							font-weight: 500;
							font-size: 22rpx;
							color: #1C274C;
							margin-top: 18rpx;
							text-align: center;
						}
					}
				}
			}
		}
	}


	.issue {
		width: 60rpx;
		height: 60rpx;
		background: linear-gradient(180deg, #FECB6F 0%, #FFAE1C 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		border-radius: 50%;
		font-size: 24rpx;
		font-weight: bold;
		color: #333333;
		padding: 20rpx;
		text-align: center;
		position: fixed;
		right: 32rpx;
		bottom: 200rpx;
	}

	.popup-box {
		width: 560rpx;
		height: 278rpx;


		.gh-title {
			text-align: center;
			padding-top: 32rpx;
			font-weight: bold;
			padding: 60rpx 0;
			color: #333333;
		}

		.growrule {
			display: flex;
			justify-content: center;

			.btn1 {
				width: 236rpx;
				height: 80rpx;
				background: #FEC04F;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
				margin-left: 12rpx;
			}

			.btn2 {
				width: 236rpx;
				height: 80rpx;
				background: #F6F6F6;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				font-weight: 500;
				font-size: 26rpx;
				line-height: 80rpx;
				text-align: center;
				margin-right: 12rpx;
			}
		}
	}
</style>